<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 16:21:43
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-31 23:43:08
 * @FilePath: \guanggu_traffic\src\views\traffic\components\EventManage\UpdateEventPopup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div ref="eventPopup" id="popup" class="ol-popup">
		<el-card>
			<template #header>
				<div class="title">
					<span>事件状态更新</span>
					<span class="close" @click="closePopup">X</span>
				</div>
			</template>
			<el-table :data="attrData" :show-header="false">
				<el-table-column prop="name" width="120"> </el-table-column>
				<el-table-column prop="value">
					<template #default="{ row }">
						<el-select
							v-if="row.name === '处理状态'"
							v-model="row.value"
						>
							<el-option label="待处理" value="0" />
							<el-option label="处理中" value="1" />
							<el-option label="已处理" value="2" />
						</el-select>
					</template>
				</el-table-column>
			</el-table>
			<div class="footer">
				<el-button type="primary" @click="handleChange">更新</el-button>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { createPopup } from '@/api/ol-api/popup'
import {Point} from'@/api/mapgis-api/Point'
const emit = defineEmits('updateSuccess')
//关闭弹窗事件回调
const closePopup = ()=>{
    setPopup({
        position:undefined,
        data:null,
        ids:[]
    })
}
const eventPopup = ref(null)
let map = null
let popup = null
//事件ID
let featureIds = []
//表格数据
const attrData = ref([
	{
		name: '事件编号',
		type: 'string',
		value: '111',
	},
	{
		name: '事件类型',
		type: 'string',
		value: '111',
	},
	{
		name: '事件等级',
		type: 'short',
		value: 1,
	},
	{
		name: '发生时间',
		type: 'string',
		value: '111',
	},
	{
		name: '发生地点',
		type: 'string',
		value: '111',
	},
	{
		name: '车牌号',
		type: 'string',
		value: '111',
	},
	{
		name: '驾驶员',
		type: 'string',
		value: '111',
	},
	{
		name: '处理状态',
		type: 'short',
		value: 2,
	},
])
const { proxy } = getCurrentInstance()
onMounted(() => {
	map = proxy.$map
	popup = createPopup({
		container: eventPopup.value,
		map,
	})
})
let colorMap = {
    0:"6",//待处理
    1:"4",//处理中,
    2:"90",
}
let service = {
	docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
	layerId: 2,
}
//确定更新事件属性事件回调
const handleChange = () => {
	//获取map图层
	const docLayer = map
		.getLayers()
		.getArray()
		.find((layer) => {
			return layer.get('name') === 'guanggu'
		})
     //事件处理状态
     const status = attrData.value.find((item)=>{
        return item.name==='处理状态'
     }).value ;
     //更新事件属性
     Point.update({
        attr:attrData.value,
        service,
        docLayer,
        featureIds:featureIds,        
        color:colorMap[status]
     }) 
     //触发更新成功事件回调 ,通知父组件更新图层状态
     emit("updateSuccess",{
        id:featureIds[0],
        status,
     })
     //关闭弹窗
     closePopup()
}
//父组件点击标注触发Popup
// 设置弹窗信息
/**
 * @param {Object} position 位置
 * @param {Object} data 点击要素的属性数据内容,对应表格显示数据
 * @param {Objct} ids 要素id
 * *******************/
const setPopup = ({ position, data = [], ids }) => {
	//设置弹窗位置,如果没有位置信息则不显示弹窗,无需更新数据
	popup.setPosition(position)
	if (position === undefined || position == null) {
		return
	}
	//更新弹窗信息
	attrData.value = attrData.value.map((item) => {
		return {
			...item,
			value: data[item.name],
		}
	})
    console.log("object",ids);
	//更新时间id
	featureIds = ids;
}
//将设置popup方法暴露给父组件
defineExpose({
	setPopup,
})
</script>

<style lang="scss" scoped>
.ol-popup {
	box-sizing: border-box;
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 300px;
	z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: '✖';
}
p {
	padding: 5px 20px;
}

.title {
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background: linear-gradient(to right, #283c86, #45a247);
	.close {
		cursor: pointer;
	}
}
:deep(.el-card__header) {
	padding: 0;
}
:deep(.el-card__body) {
	padding: 0;
}
.footer {
	margin: 10px 10px;
}
</style>
